<pro-header [title]="'搜索列表'">
    <ng-template #content>
        <div class="text-center">
            <nz-input [nzType]="'search'" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" style="width: 520px;"></nz-input>
        </div>
    </ng-template>
    <ng-template #tab>
        <nz-tabset [nzSize]="'default'" [nzSelectedIndex]="0">
            <nz-tab><ng-template #nzTabHeading><a [routerLink]="['/pro/list/search']">文章</a></ng-template></nz-tab>
            <nz-tab><ng-template #nzTabHeading><a [routerLink]="['/pro/list/filter-card-list']">应用</a></ng-template></nz-tab>
            <nz-tab><ng-template #nzTabHeading><a [routerLink]="['/pro/list/cover-card-list']">项目</a></ng-template></nz-tab>
        </nz-tabset>
    </ng-template>
</pro-header>
<nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'inline'">
        <standard-form-row [title]="'所属类目'" block style="padding-bottom: 11px">
            <div nz-form-item>
                <div nz-form-control>
                    <tag-select>
                        <nz-checkable-tag *ngFor="let i of categories; let idx = index" [nzChecked]="i.value" (nzChange)="changeCategory($event, idx)">
                            {{i.text}}
                        </nz-checkable-tag>
                    </tag-select>
                </div>
            </div>
        </standard-form-row>
        <standard-form-row [title]="'owner'" grid>
            <div nz-form-item>
                <div nz-form-control>
                    <nz-select [(ngModel)]="q.owners" name="owners" [nzSize]="'large'" [nzMode]="'tags'" style="width: 286px;">
                        <nz-option *ngFor="let i of owners" [nzLabel]="i.name" [nzValue]="i.id"></nz-option>
                    </nz-select>
                    <a class="ml-sm" (click)="setOwner()">只看自己的</a>
                </div>
            </div>
        </standard-form-row>
        <standard-form-row [title]="'其它选项'" grid last>
            <div nz-row [nzGutter]="16">
                <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="10" nzXl="8">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col><label for="rate">活跃用户</label></div>
                        <div nz-form-control nz-col nzXs="24" nzSm="24" nzMd="12">
                            <nz-select [(ngModel)]="q.user" name="user" [nzPlaceHolder]="'不限'" [nzShowSearch]="true" [nzSize]="'large'" style="width: 200px;">
                                <nz-option [nzLabel]="'李三'" [nzValue]="'lisa'"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="10" nzXl="8">
                    <div nz-form-item nz-row>
                        <div nz-form-label nz-col><label for="rate">好评度</label></div>
                        <div nz-form-control nz-col nzXs="24" nzSm="24" nzMd="12">
                            <nz-select [(ngModel)]="q.rate" name="rate" [nzPlaceHolder]="'不限'" [nzShowSearch]="true" [nzSize]="'large'" style="width: 200px;">
                                <nz-option [nzLabel]="'优秀'" [nzValue]="'good'"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
            </div>
        </standard-form-row>
    </form>
</nz-card>
<nz-card [nzBordered]="false">
    <nz-list
        nzSize="large"
        nzItemLayout="vertical"
        [nzLoading]="loading"
        [nzDataSource]="list">
        <ng-template #item let-item>
            <nz-list-item [nzContent]="nzContent" [nzExtra]="nzExtra">
                <nz-list-item-action><i class="anticon anticon-star-o mr-sm"></i>{{item.star}}</nz-list-item-action>
                <nz-list-item-action><i class="anticon anticon-like-o mr-sm"></i>{{item.like}}</nz-list-item-action>
                <nz-list-item-action><i class="anticon anticon-message mr-sm"></i>{{item.message}}</nz-list-item-action>
                <ng-template #nzExtra><div style="width: 272px; height: 1px;"></div></ng-template>
                <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription">
                    <ng-template #nzTitle><a href="{{item.href}}" target="_blank">{{item.title}}</a></ng-template>
                    <ng-template #nzDescription>
                        <nz-tag>Alain</nz-tag><nz-tag>ng-zorro-antd</nz-tag><nz-tag>Ant Design</nz-tag>
                    </ng-template>
                </nz-list-item-meta>
                <ng-template #nzContent>
                    <p>{{item.content}}</p>
                    <div class="mt-md d-flex">
                        <nz-avatar [nzSrc]="item.avatar" [nzSize]="'small'" class="mr-sm"></nz-avatar>
                        <a href="{{item.href}}" target="_blank">{{item.owner}}</a>
                        <span class="px-sm">发布在</span>
                        <a href="{{item.href}}" target="_blank">{{item.href}}</a>
                        <time class="pl-md text-grey" title="{{item.updatedAt}}">{{item.updatedAt | _date}}</time>
                    </div>
                </ng-template>
            </nz-list-item>
        </ng-template>
        <ng-template #loadMore>
            <div class="text-center mt-md">
                <button nz-button (click)="getData()" [nzLoading]="loading" [nzType]="'dashed'" [nzSize]="'large'" style="min-width:200px">加载更多</button>
            </div>
        </ng-template>
    </nz-list>
</nz-card>
